<template>
  <!-- 查看匹配数据 -->
  <a-modal :visible="visible" width="750px" @cancel="closeDrawer">
    <a-space class="mb-[20px]">
      <div class="tags"></div>{{ $t('app.setting.themecolor.ff99') }}:{{ detailTitle }}
    </a-space>
    <a-table style="width: 700px;" size="middle" class="h-full overflow-x-auto" :pagination="true" :data-source="listData"
      bordered :rowKey="record => record.Id">
      <a-table-column key="DiscoverJournalCreatetime" data-index="DiscoverJournalCreatetime" width="150">
        <span slot="title">{{ $t('app.setting.themecolor.ff9999') }}</span>
      </a-table-column>
      <a-table-column key="DiscoverJournalRecord" data-index="DiscoverJournalRecord" width="150">
        <span slot="title">{{ $t('app.setting.themecolor.ff999999') }}</span>
      </a-table-column>
    </a-table>
    <!-- 按钮配置 -->
    <template slot="footer">
      <a-button type="primary" @click="closeDrawer">
        {{ $t('app.setting.themecolor.ff99999999') }}
      </a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      // 下面这些都是通用的
      form: this.$form.createForm(this),
      visible: false,
      detailTitle: "",
      // 列表表头
      columns: [
        {
          title: "时间",
          dataIndex: "DiscoverJournalCreatetime",
          align: "center",
          width: '120px',
        },
        {
          title: "记录",
          dataIndex: "DiscoverJournalRecord",
          align: "center",
          width: '120px',
        }
      ],
      // 列表数据
      listData: []
    }
  },
  mounted() { },
  methods: {
    closeDrawer() {
      this.visible = false;
    },
    read(data) {
      this.visible = true;
      this.detailTitle = data.Title
      this.listData = data.list;
    },
    // 关闭 通用的 
    close() {
      // 修改侧边栏状态
      this.visible = false
    },
  },
}
</script>
<style lang="css">
.tags {
  left: 298px;
  top: 288px;
  width: 6px;
  height: 14px;
  opacity: 1;
  border-radius: 2px;
  background: rgba(0, 80, 247, 1);
}
</style>